<!--
 * @Description: 流程图弹出预览
 * @Author: DHL
 * @Date: 2022-09-14 11:09:34
 * @LastEditors: DHL
 * @LastEditTime: 2024-02-07 09:16:01
-->
<template>
  <tw-drawer v-model="visible" title="流程图" size="60%" :sticky="false" @close="handleClose">
    <twFlowchart ref="twFlowchartRef"></twFlowchart>
  </tw-drawer>
</template>

<script setup lang="ts">
  import { nextTick, ref } from 'vue'
  import twFlowchart from './twFlowchart.vue'

  /**
   * 显示弹框
   */
  const visible = ref(false)

  const twFlowchartRef = ref()

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen(params) {
    visible.value = true
    nextTick(() => {
      twFlowchartRef.value.build(params)
    })
  }

  /**
   * 关闭弹框
   */
  function handleClose() {
    visible.value = false
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss"></style>
